<script setup lang="ts">
import type { UserApi } from '#/api/core/user';

import { reactive, ref } from 'vue';

import {
  SvgAvatar1Icon,
  SvgAvatar2Icon,
  SvgAvatar3Icon,
  SvgAvatar4Icon,
  SvgBellIcon,
  SvgCakeIcon,
  SvgCardIcon,
  SvgDownloadIcon,
} from '@vben/icons';
import { cloneDeep } from '@vben/utils';

import { ElMessage } from 'element-plus';

import { getCenterApi, setCenterApi } from '#/api/core/user';
import { useAuthStore } from '#/store';

const authStore = useAuthStore();

const dataFormRef = ref();
const defaultForm = {
  id: 0,
  name: '',
  username: '',
  email: '',
  phone: '',
  department_id: '',
  position_id: '',
  password: '',
  conf_password: '',
};
const icons = {
  0: SvgAvatar1Icon,
  1: SvgAvatar2Icon,
  2: SvgAvatar3Icon,
  3: SvgAvatar4Icon,
  4: SvgBellIcon,
  5: SvgCakeIcon,
  6: SvgCardIcon,
  7: SvgDownloadIcon,
};

const randomIndex = Math.floor(Math.random() * 9);
const randomIcon = icons[randomIndex as keyof typeof icons];
const params = reactive({
  disabled: true,
  type: 1,
});
const datas = ref();
const dataForm = ref<Record<string, any>>({ ...defaultForm });
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入密码'));
  } else if (value === dataForm.value.password) {
    callback();
  } else {
    callback(new Error('两个输入不匹配!'));
  }
};
const dataRules = ref({
  name: [{ required: true, message: '请输入', trigger: 'blur' }],
  username: [{ required: true, message: '请输入', trigger: 'blur' }],
  emp_id: [{ required: true, message: '请输入', trigger: 'blur' }],
  department_id: [{ required: true, message: '请选择', trigger: 'change' }],
  position_id: [{ required: true, message: '请选择', trigger: 'change' }],
  password: [{ required: true, message: '请输入', trigger: 'blur' }],
  conf_password: [
    { validator: validatePass2, required: false, trigger: 'blur' },
  ],
});

const submitHandle = (flag: boolean, value: number) => {
  dataFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      await setCenterApi(
        dataForm.value.id,
        dataForm.value as UserApi.IPersonalInfo,
      );
      ElMessage({
        message: '修改成功',
        type: 'success',
      });
      params.disabled = flag;
      params.type = value === 0 ? 1 : value;
      if (dataForm.value.password) {
        await authStore.logout(false);
      }
    }
  });
};
const handleEdit = async (value: number, flag: boolean) => {
  if (value === 1) {
    // 点击保存
    submitHandle(flag, value);
  } else {
    params.disabled = flag;
    params.type = value === 0 ? 1 : value;
    dataForm.value = cloneDeep(datas.value);
  }
};
// 获取详情
const getCenter = async () => {
  const result = await getCenterApi();
  datas.value = cloneDeep(result);
  dataForm.value = result;
};

getCenter();
</script>

<template>
  <div class="m-5">
    <el-card class="card lg:p-20">
      <div class="text-center lg:w-96">
        <!--        <el-avatar-->
        <!--          :size="80"-->
        <!--          src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"-->
        <!--        />-->
        <component
          :is="randomIcon"
          class="radius10 size-20"
          style="margin: 0 auto"
        />
        <p class="mt-6 font-bold">{{ dataForm.name }}</p>
        <p class="mt-2 text-sm text-slate-400">
          加入日期：{{ new Date(dataForm.created_at).toLocaleString() }}
        </p>
        <el-form
          ref="dataFormRef"
          class="form mt-4"
          :model="dataForm"
          :rules="dataRules"
          label-width="100px"
          label-position="left"
        >
          <el-form-item label="员工姓名" prop="name">
            <el-input
              v-model="dataForm.name"
              maxlength="50"
              placeholder="请输入"
              :disabled="params.disabled"
            />
          </el-form-item>
          <el-form-item label="登录用户名">
            <el-input v-model="dataForm.username" disabled />
          </el-form-item>
          <el-form-item label="邮箱" prop="">
            <el-input v-model="dataForm.email" :disabled="params.disabled" />
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="dataForm.phone" :disabled="params.disabled" />
          </el-form-item>
          <el-form-item label="密码" v-if="!params.disabled">
            <el-input v-model="dataForm.password" :disabled="params.disabled" />
          </el-form-item>
          <el-form-item
            label="确认密码"
            v-if="!params.disabled && dataForm.password"
            prop="conf_password"
          >
            <el-input v-model="dataForm.conf_password" />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="handleEdit(2, false)"
              v-if="params.type === 1"
            >
              编辑
            </el-button>
            <template v-else>
              <el-button type="primary" @click="handleEdit(1, true)">
                保存
              </el-button>
              <el-button @click="handleEdit(0, true)" bg text type="info">
                取消
              </el-button>
            </template>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.card {
  height: calc(100vh - 130px);
}

.radius10 {
  border-radius: 10px;
}
</style>
